<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Spock拳</title>
    <style>
    	body, div, p, ul,li, img {
			padding: 0;
			margin: 0;
		}
		.clearfix {
			zoom: 1;
		}
		.clearfix:after {
			display: block;
			clear: both;
			content: "";
			visibility: hidden;
			height: 0;
		}
		
		.layout {
			display: -webkit-box;
  			display: -moz-box;
  			display: -ms-flexbox;
  			display: -webkit-flex;
  			display: flex;
			
			-webkit-flex-flow: row wrap;
			justify-content: flex-start;
	
			width: 980px;
			height: auto;
			margin: 20px auto;
			padding: 20px;
			background: #eee;
			border: 1px solid #999;
		}
		
		.gameview {
			display: -webkit-box;
  			display: -moz-box;
  			display: -ms-flexbox;
  			display: -webkit-flex;
  			display: flex;
			
			width: 980px;
			height: 100px;
		}
		.you {
			height: 100px;
			
			order: -1;
        	flex: 0 1 400px;
		}
		.you span {
			margin-left: 50px;	
			font-size: 18px;
			font-weight:bold;
			color: red;
		}
		.option > li {
			float: left;
			list-style: none;
			padding-left: 10px;
			padding-top: 20px;
		}
		.option button {
			width: 70px;
			height: 30px;
		}
		.result {
			width: 100px;
			height:60px;
			padding-top: 40px;
			text-align:center;
			
			flex-grow: 1;
		}
		.result span {
			color: red;
			font-size: 26px;	
		}
		.computer {
			width: 300px;
			height: 100px;
			
			flex: 0 1 300px;
		}
		.computer span {
			margin-left: 50px;	
			font-size: 18px;
			font-weight:bold;
			color: red;	
		}
		.imgview {
			display: -webkit-box;
  			display: -moz-box;
  			display: -ms-flexbox;
  			display: -webkit-flex;
  			display: flex;
		}
		.aBtn {
			width: 180px;
			height: 30px;
			margin: 0 400px;
			
		}
		
		.againview {
			width: auto;
			height: 30px;
		}
		img {
		display: block;
		border: none;
		max-width: 400px;
		max-height: 400px;
		padding: 20px;
		}
    </style>
</head>
<body>
	<div class="layout">
		<div class="gameview">
        	<div class="you">
        		<p>你出什么？<span id="select">选择</span></p>
                <ul class="option">
                	<li><button id="scissors" onclick="p(1)">剪刀</button></li>
                	<li><button id="rock" onclick="p(2)">石头</button></li>
                	<li><button id="paper" onclick="p(3)">布</button></li>
                	<li><button id="lizzard" onclick="p(4)">蜥蜴</button></li>
                	<li><button id="spock" onclick="p(5)">史波克</button></li>
                </ul>
        	</div>
			<div class="result">
        		<span id="resultSpan"></span>
        	</div>
			<div class="computer">
        		<p>电脑出:</p>
        		<span id="pc"></span>
        	</div>
        </div>
        
        <div class="againview"><button id="again" class="aBtn" onclick="regame()">再来一次</button></div>
        
        <div class="imgview">
        <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=1d08dd010fd79123e0e0947c9d355917/ebe6fec4b74543a955ae77c51d178a82b8011405.jpg" alt="spock拳图示">
        <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=0aa60b258401a18bf0eb1247ae2e0761/89f6a6de9c82d1584dcdd4b8830a19d8bd3e426f.jpg" alt="spock拳图示">
        </div>
        
	</div>
    
    <script>
		var time = 20,
			se = null,
			youSum = 0,
			
			scissorsBtn = document.getElementById("scissors"),
			rockBtn = document.getElementById("rock"),
			paperBtn = document.getElementById("paper"),
			lizzardBtn = document.getElementById("lizzard"),
			spockBtn = document.getElementById("spock"),
			
			selectTxt = document.getElementById("select"),
			pcTxt = document.getElementById("pc"),
			resultTxt = document.getElementById("resultSpan"),
			againBtn = document.getElementById("again"),
			
			arr = new Array("剪刀","石头","布","蜥蜴","史波克");

            function p(n){
                you = n;
                selectTxt.innerHTML=s(n);
                rockBtn.disabled=true;
                paperBtn.disabled=true;
                scissorsBtn.disabled=true;
                lizzardBtn.disabled=true;
                spockBtn.disabled=true;
                resultTxt.innerHTML = '...';
                se = setInterval('timeThing()',50);
            }
            function regame(){
                rockBtn.disabled=false;
                paperBtn.disabled=false;
                scissorsBtn.disabled=false;
                lizzardBtn.disabled=false;
                spockBtn.disabled=false;
                againBtn.style.display = 'none';     
                pcTxt.innerHTML = '';
                resultTxt.innerHTML = '';
                selectTxt.innerHTML= '请选择';        
            }
            function bt(){
                var pc = Math.floor(Math.random() * 5 + 1);
                pcTxt.innerHTML = s(pc);
                var str='';
                if(pc==you){
                    str += '平局';    
                }else{
                    var b = pc-you;
                    if(b>0){
                        if(b==1){
                            str += '电脑赢';   
                        }else{
                            str += '你赢啦';   
                        }               
                    }else{
                        b = b*-1;   
                        if(b==1){
                            str += '你赢啦';   
                        }else{
                            str += '电脑赢';   
                        }   
                    }       
                }
                againBtn.style.display = 'block';
                resultTxt.innerHTML = str;
            }
            function timeThing(){
                if(time>0){
                    pcTxt.innerHTML = arr[time%5];
                    time--;
                }else{
                    clearInterval(se);
                    se = null;
                    time = 20;
                    bt();
                }
            }
            function s(n){
                if (n == 1) {
				    return "剪刀";
                } else if (n == 2) {
				    return "石头";
                } else if (n == 3) {
				    return "布";
                } else if (n == 4) {
				    return "蜥蜴";
                } else {
				    return "史波克";
                }
            }
    </script>
</body>
</html>